<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>导航页</title>
    <base th:href="@{/}"><!-- 不用base就使用th:src="@{/js/jquery.min.js} -->
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <head>

        <meta charset="UTF-8">
        <title>后台管理</title>
        <link rel="stylesheet" href="style.css">

        <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            /* Google Fonts Import Link */
            @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'Poppins', sans-serif;
            }

            .sidebar {
                position: fixed;
                top: 0;
                left: 0;
                height: 100%;
                width: 260px;
                background: #11101d;
                z-index: 100;
                transition: all 0.5s ease;
            }

            .sidebar.close {
                width: 78px;
            }

            .sidebar .logo-details {
                height: 60px;
                width: 100%;
                display: flex;
                align-items: center;
            }

            .sidebar .logo-details i {
                font-size: 30px;
                color: #fff;
                height: 50px;
                min-width: 78px;
                text-align: center;
                line-height: 50px;
            }

            .sidebar .logo-details .logo_name {
                font-size: 22px;
                color: #fff;
                font-weight: 600;
                transition: 0.3s ease;
                transition-delay: 0.1s;
            }

            .sidebar.close .logo-details .logo_name {
                transition-delay: 0s;
                opacity: 0;
                pointer-events: none;
            }

            .sidebar .nav-links {
                height: 100%;
                padding: 30px 0 150px 0;
                overflow: auto;
            }

            .sidebar.close .nav-links {
                overflow: visible;
            }

            .sidebar .nav-links::-webkit-scrollbar {
                display: none;
            }

            .sidebar .nav-links li {
                position: relative;
                list-style: none;
                transition: all 0.4s ease;
            }

            .sidebar .nav-links li:hover {
                background: #1d1b31;
            }

            .sidebar .nav-links li .iocn-link {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .sidebar.close .nav-links li .iocn-link {
                display: block
            }

            .sidebar .nav-links li i {
                height: 50px;
                min-width: 78px;
                text-align: center;
                line-height: 50px;
                color: #fff;
                font-size: 20px;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .sidebar .nav-links li.showMenu i.arrow {
                transform: rotate(-180deg);
            }

            .sidebar.close .nav-links i.arrow {
                display: none;
            }

            .sidebar .nav-links li a {
                display: flex;
                align-items: center;
                text-decoration: none;
            }

            .sidebar .nav-links li a .link_name {
                font-size: 18px;
                font-weight: 400;
                color: #fff;
                transition: all 0.4s ease;
            }

            .sidebar.close .nav-links li a .link_name {
                opacity: 0;
                pointer-events: none;
            }

            .sidebar .nav-links li .sub-menu {
                padding: 6px 6px 14px 80px;
                margin-top: -10px;
                background: #1d1b31;
                display: none;
            }

            .sidebar .nav-links li.showMenu .sub-menu {
                display: block;
            }

            .sidebar .nav-links li .sub-menu a {
                color: #fff;
                font-size: 15px;
                padding: 5px 0;
                white-space: nowrap;
                opacity: 0.6;
                transition: all 0.3s ease;
            }

            .sidebar .nav-links li .sub-menu a:hover {
                opacity: 1;
            }

            .sidebar.close .nav-links li .sub-menu {
                position: absolute;
                left: 100%;
                top: -10px;
                margin-top: 0;
                padding: 10px 20px;
                border-radius: 0 6px 6px 0;
                opacity: 0;
                display: block;
                pointer-events: none;
                transition: 0s;
            }

            .sidebar.close .nav-links li:hover .sub-menu {
                top: 0;
                opacity: 1;
                pointer-events: auto;
                transition: all 0.4s ease;
            }

            .sidebar .nav-links li .sub-menu .link_name {
                display: none;
            }

            .sidebar.close .nav-links li .sub-menu .link_name {
                font-size: 18px;
                opacity: 1;
                display: block;
            }

            .sidebar .nav-links li .sub-menu.blank {
                opacity: 1;
                pointer-events: auto;
                padding: 3px 20px 6px 16px;
                opacity: 0;
                pointer-events: none;
            }

            .sidebar .nav-links li:hover .sub-menu.blank {
                top: 50%;
                transform: translateY(-50%);
            }

            .sidebar .profile-details {
                position: fixed;
                bottom: 0;
                width: 260px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: #1d1b31;
                padding: 6px 0;
                transition: all 0.5s ease;
            }

            .sidebar.close .profile-details {
                background: none;
            }

            .sidebar.close .profile-details {
                width: 78px;
            }

            .sidebar .profile-details .profile-content {
                display: flex;
                align-items: center;
            }

            .sidebar .profile-details img {
                height: 52px;
                width: 52px;
                object-fit: cover;
                border-radius: 16px;
                margin: 0 14px 0 12px;
                background: #1d1b31;
                transition: all 0.5s ease;
            }

            .sidebar.close .profile-details img {
                padding: 10px;
            }

            .sidebar .profile-details .profile_name,
            .sidebar .profile-details .job {
                color: #fff;
                font-size: 18px;
                font-weight: 500;
                white-space: nowrap;
            }

            .sidebar.close .profile-details i,
            .sidebar.close .profile-details .profile_name,
            .sidebar.close .profile-details .job {
                display: none;
            }

            .sidebar .profile-details .job {
                font-size: 12px;
            }

            .home-section {
                position: absolute;
                background: #E4E9F7;
                height: 100vh;
                left: 260px;
                top: 0px;
                width: calc(100% - 260px);
                transition: all 0.5s ease;
            }

            .test {
                position: absolute;
                background: #E4E9F7;
                display: inline-block;
                top: 110px;
                left: 30px;
                transition: all 0.5s ease;
            }

            .sidebar.close ~ .home-section {
                left: 78px;
                width: calc(100% - 78px);
            }

            .home-section .home-content {
                height: 60px;
                display: flex;
                align-items: center;
            }

            .home-section .home-content .bx-menu,
            .home-section .home-content .text {
                color: #11101d;
                font-size: 35px;
            }

            .home-section .home-content .bx-menu {
                margin: 0 15px;
                cursor: pointer;
            }

            .home-section .home-content .text {
                font-size: 26px;
                font-weight: 600;
            }

        </style>
    </head>
<body>
    <div class="sidebar">
        <div class="logo-details">
            <i class='bx bxs-user'></i>
            <span class="logo_name">后台管理</span>
        </div>
        <ul class="nav-links">

            <li>
                <div class="iocn-link">
                    <a href="#">
                        <i class='bx bx-collection'></i>
                        <span class="link_name">类型管理</span>
                    </a>
                    <i class='bx bxs-chevron-down arrow'></i>
                </div>
                <ul class="sub-menu">
                    <li><a th:href="@{type/selectAllTypeByPage?currentPage=1}">查询类型</a></li>
                    <li><a th:href="@{type/toAddType}">添加类型</a></li>
                    <li><a th:href="@{type/selectTypeUpdate?currentPage=1}">修改类型</a></li>
                    <li><a th:href="@{type/selectTypeDelete?currentPage=1}">删除类型</a></li>
                </ul>
            </li>


            <li>
                <div class="iocn-link">
                    <a href="#">
                        <i class='bx bx-spreadsheet'></i>
                        <span class="link_name">商品管理</span>
                    </a>
                    <i class='bx bxs-chevron-down arrow'></i>
                </div>
                <ul class="sub-menu">

                    <li><a th:href="@{goods/selectAllGoodsByPage?currentPage=1&act=select}">查询商品</a></li>
                    <li><a th:href="@{goods/toAddGoods}">添加商品</a></li>
                    <li><a th:href="@{goods/selectAllGoodsByPage?currentPage=1&act=updateSelect}">修改商品</a></li>
                    <li><a th:href="@{goods/selectAllGoodsByPage?currentPage=1&act=deleteSelect}">删除商品</a></li>

                </ul>
            </li>

            <li>
                <div class="iocn-link">
                    <a href="#">
                        <i class='bx bxs-shopping-bags'></i>

                        <span class="link_name">订单管理</span>
                    </a>
                    <i class='bx bxs-chevron-down arrow'></i>
                </div>
                <ul class="sub-menu">
                    <li><a th:href="@{selectOrder?currentPage=1}">查询订单</a></li>
                    <li><a th:href="@{selectOrder?currentPage=1}">修改订单</a></li>
                    <li><a th:href="@{selectOrderDelete?currentPage=1}">删除订单</a></li>
                </ul>
            </li>

            <li>
                <div class="iocn-link">
                    <a href="#">
                        <i class='bx bxs-group'></i>
                        <span class="link_name">用户管理</span>
                    </a>
                    <i class='bx bxs-chevron-down arrow'></i>
                </div>
                <ul class="sub-menu">
                    <li><a th:href="@{selectUser?currentPage=1}">查询用户</a></li>
                    <li><a th:href="@{selectUserUpdate?currentPage=1}">修改用户</a></li>
                    <li><a th:href="@{selectUserDelete?currentPage=1}">删除用户</a></li>
                </ul>
            </li>

            <li>
                <div class="iocn-link">
                    <a href="#">
                        <i class='bx bx-bar-chart-alt-2'></i>
                        <span class="link_name">统计分析</span>
                    </a>
                    <i class='bx bxs-chevron-down arrow'></i>
                </div>
                <ul class="sub-menu">
                    <a th:href="@{admin/statistics}">统计分析</a>
                </ul>
            </li>

            <li>
                <div class="profile-details">
                    <div class="profile-content">
                        <i class='bx bxs-user'></i>
                    </div>
                    <div class="name-job">
                        <div class="profile_name">Admin</div>
                        <div class="job" th:if="${session.auser.aname}=='admin1'">一级管理员</div>
                        <div class="job" th:if="${session.auser.aname}=='admin2'">二级管理员</div>
                    </div>
                    <a th:href="@{loginOut}"><i class='bx bx-log-out'></i></a>
                </div>
            </li>
        </ul>
    </div>
    <script>
        let arrow = document.querySelectorAll(".arrow");
        for (var i = 0; i < arrow.length; i++) {
            arrow[i].addEventListener("click", (e) => {
                let arrowParent = e.target.parentElement.parentElement;
                arrowParent.classList.toggle("showMenu");
            });
        }
    </script>

</body>
</html>
